<template >
  <main>
    <card-header></card-header>
    <component :is="msg"></component>
    <p style="color:rgba(0,0,0,.4);" @click="msg='message'" v-if="msg=='login'">手机号快速注册</p>
     <p style="color:rgba(0,0,0,.4);" @click="msg='login'" v-if="msg=='message'">登录</p>
     <div class="quicklogin">
       <div class="quick">
         <div  class="quick-login">
         
       </div>
       <h4 class="txt-otherLogin"> 其他登录方式</h4>
       </div>
       <div class="quick-type">
          <a href="javascript:0;" class="icon-login">
             QQ
          </a>
          <a href="javascript:0;" class="icon-login weixin">
             微信
          </a>
          <a href="javascript:0;" class="icon-login apple">
             苹果
          </a>
       </div>
       <p class="policy_tip" v-if="msg=='message'">
         <input type="checkbox" class="policy_tip-checkbox" >
         <span>若您输入的手机号未注册，将为您直接注册，注册即视为同意</span>
         <span><a href="javascript:0;">京东用户注册协议</a><span>、</span></span><a href="javascript:0;">用户隐私政策</a>
       </p>
       <p class="policy_tip" v-if="msg=='login'">
         <input type="checkbox" class="policy_tip-checkbox">
         <span>登录即代表您已同意</span>
         <span><a href="javascript:0;">用户隐私政策</a></span>
       </p>
     </div>
  </main>
</template>
<script>
import cardHeader from '../components/Card/cardHeader.vue'
import login from '../components/Login/Log.vue'
import message from '../components/Login/Mess.vue'
export default {
  name:"Login",
  components:{
    'cardHeader':cardHeader,
    'login':login,
    'message':message
  },
  data:()=>({
    msg:'login'
  })
}
</script>
<style scoped lang="less">
.quicklogin{
  width: 20.3125rem;
  padding-top: 6.25rem;
  margin: 0rem auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .quick{
    width: 100%;
  }
  .quick-login{
    width:100%;
    border-top: .0625rem solid rgba(0,0,0,.1);
    
  }
  .txt-otherLogin{
    font-size: .875rem;
    color: rgba(0,0,0,.2);
   width: 8.75rem;
   
    background: #fff;
    text-align: center;
    margin: -0.625rem auto 0;
  }
  .quick-type{
     width: 20.3125rem;
     height: 4.3125rem;
     padding-top: 1.25rem;
      .icon-login{
        display: inline-block;
        width: 3rem;
        padding-top: 3.125rem;
        background: url("../assets/images/QQ.png") no-repeat;
        background-size: 100%;
        color: rgba(0,0,0,.4);
        text-decoration: none;
        margin:0 1.25rem;
        }
        .weixin{
        background-image: url("../assets/images/weixin.png");
        }
        .apple{
        background-image: url("../assets/images/apple.png");
        }
  }
  .policy_tip{
    text-align: center;
    font-size:.8125rem;
    color: rgba(0,0,0,.3);
    margin-top: 0.15rem;
    padding-top: 1.25rem;
    a{
      text-decoration: none;
    }
  }
  .policy_tip-checkbox{
    background-color: #fff;
    display: inline-block;
    vertical-align: text-top;
  }
}
</style>
